<template>
	<view>
		<view class="video-title" v-if="currentAblum.skitName || videoTtem.episodeName"
			:class="[VideoTimeVisible ? 'isMoveTo': '',islongpressHandler ? 'complete-works_l': '']">
			<view class="complete">{{videoTtem.video.title || currentAblum.skitName}}</view>
			<view class="btn">{{videoTtem.episodeName}}</view>
		</view>
		<view class="complete-works-box" @touchend="touchend" @touchmove="moveTo" @touchstart="buttonStart">
			<view class="complete-works" v-if="currentAblum.episodeTotal || videoTtem.video"
				:class="[VideoTimeVisible ? 'isMoveTo': '',islongpressHandler ? 'complete-works_l': '']" @tap.stop.prevent="onAllVideo">
				<view class="complete">全{{videoTtem.video.episodes || currentAblum.episodeTotal}}集</view>
				<view class="btn" v-if="from == 'index'">看全集</view>
				<view class="btn" v-else>选集</view>
			</view>
			<!-- highlight -->
			<view class="process_wrap" :style="{width: max + 'px', zIndex: 1999}" :class="{'process_wrap_l':islongpressHandler}">
				<view v-if="VideoTimeVisible" class="video-time" :style="{ left: (max - 131 ) / 2 + 'px' }">
					{{videoCurrentTime}}&nbsp;/&nbsp;{{comVideoTotalTime}}
				</view>
				<view class="highlight-line-box">
					<!-- :class="highlight?'highlight-line':'line'" -->
					<view class="highlight-line" :animation="lineAnimationData"></view>
				</view>
				<view class="highlight-active-line-box">
					<!-- :class="highlight?'highlight-active-line':'active-line'" -->
					<view id="active-line" class="highlight-active-line" :animation="activeLineAnimationData"
						:style="{width: progress + 'px',maxWidth: max + 'px',opacity: linOpacity}"></view>
				</view>
				<!-- :class="highlight?'highlight-spot':'spot'" -->
				<view id=" slider" class="highlight-spot" :style="{left: (progress > max ? max : progress - 1) + 'px'}" :animation="spotAnimationData">
					<view></view>
				</view>
			</view>
		</view>
		<text v-show="false">{{video_error}}</text>
		<view @tap.stop.prevent="progressHandler" @longpress="longpressHandler" class="video-pause" @touchend="touchend" @touchmove="moveTo"
			@touchstart="buttonStart" v-if="!video_error">
			<image v-if="videoPause" src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/assets/pause.png" />
		</view>
	</view>
</template>

<script>
	import {
		formatTime
	} from '@/util/index';
	import throttle from '@/uni_modules/uv-ui-tools/libs/function/throttle.js';
	var startPoint;
	const min = 0; // 最小宽度 单位px
	const app = getApp();
	export default {
		props: {
			highlightProps: {
				type: Boolean,
				default: false
			},
			needChangeVideo: {
				type: Boolean,
				default: false
			},
			isplay: {
				type: Boolean,
				default: true
			},
			max: {
				type: [Number, String],
				default: 300
			},
			videoCurrentTimeProps: {
				type: [Number, String],
				default: 100
			},
			videoTotalTime: {
				type: [Number, String],
				default: 100,
			},
			videoCurrentTimeSecProps: {
				type: [Number, String],
				default: 100,
			},
			isExitFullscreen: {
				type: Boolean,
				default: false,
			},
			videoTtem: {
				type: Object,
				default () {
					return {};
				}
			},
			currentAblum: {
				type: Object,
				default () {
					return {};
				}
			},
			from: {
				type: String,
				default: '',
			},
			video_error: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				/**
				 * 页面的初始数据
				 */
				lineAnimationData: null,
				activeLineAnimationData: null,
				spotAnimationData: null,
				buttonLeft: 0,
				progress: 0, // 进度条的宽度，这里的单位是px，所以在wxml文件中要改为rpx
				precent: 0, // 这个是百分比
				status: 0,
				videoCurrentTime: '00:00',
				formatTime,
				comVideoTotalTime: 0,
				VideoTimeVisible: false,
				videoPause: false,
				videoCurrentTimeSec: 0,
				highlight: false,
				intervalId: null,
				islongpressHandler: false,
				isProgress: false,
				touchType: '',
				linOpacity: 0
			};
		},
		computed: {},
		mounted() {
			this.$nextTick(() => {
				this.lineAnimation = uni.createAnimation();
				this.activeLineAnimation = uni.createAnimation();
				this.spotAnimation = uni.createAnimation();
				// this.progressRun();
			})
		},
		watch: {
			highlightProps: {
				handler(value) {
					this.highlight = value
				},
				immediate: true
			},
			videoCurrentTimeProps: {
				handler(value) {
					this.videoCurrentTime = formatTime(Math.floor(value))
				},
				immediate: true
			},
			videoTotalTime: {
				handler(value) {
					this.comVideoTotalTime = formatTime(Math.floor(value))
				},
				immediate: true
			},
			videoCurrentTimeSecProps: {
				handler(value) {
					if (value) {
						const {
							max,
							videoTotalTime,
							buttonLeft
						} = this;
						let distance = (max / videoTotalTime) * value
						this.buttonLeft = distance
						this.progress = distance
						setTimeout(() => {
							this.linOpacity = 1
						}, 500)
						this.precent = parseInt((distance / max) * 100)
						this.videoCurrentTime = formatTime(Math.floor(value))
						this.videoCurrentTimeSec = value
					}
				},
				immediate: true
			},
			isExitFullscreen: {
				handler(value) {
					if (value) {
						this.videoPause = false
					}
				},
				immediate: true
			},
			needChangeVideo: {
				handler(value) {
					if (value) {
						this.videoPause = false
					}
				},
				immediate: true
			},
		},
		methods: {
			slide() {
				if (!this.activeLineAnimation || this.activeLineAnimation || this.spotAnimation) {
					this.lineAnimation = uni.createAnimation();
					this.activeLineAnimation = uni.createAnimation();
					this.spotAnimation = uni.createAnimation();
				}
				this.lineAnimation.scaleY(2).step();
				this.activeLineAnimation.scaleY(2).step();
				this.spotAnimation.scale(2).step();

				this.activeLineAnimationData = this.activeLineAnimation.export();
				this.spotAnimationData = this.spotAnimation.export();
				this.lineAnimationData = this.lineAnimation.export();
			},
			highlightLine() {

			},
			reset() {
				if (!this.activeLineAnimation || this.activeLineAnimation || this.spotAnimation) {
					this.lineAnimation = uni.createAnimation();
					this.activeLineAnimation = uni.createAnimation();
					this.spotAnimation = uni.createAnimation();
				}
				this.activeLineAnimation.rotate(0, 0).scale(1).translate(0, 0).skew(0, 0).step({
					duration: 0
				});
				this.spotAnimation.rotate(0, 0).scale(1).translate(0, 0).skew(0, 0).step({
					duration: 0
				});
				this.lineAnimation.rotate(0, 0).scale(1).translate(0, 0).skew(0, 0).step({
					duration: 0
				});

				this.activeLineAnimationData = this.activeLineAnimation.export();
				this.spotAnimationData = this.spotAnimation.export();
				this.lineAnimationData = this.lineAnimation.export();

			},
			// 监听触摸开始事件
			buttonStart(e) {
				if (!this.isplay) {
					return false
				}

				if (this.video_error) {
					return false
				}

				this.isProgress = false
				this.touchType = 'l'
				setTimeout(() => {
					this.isProgress = true
				}, 200)
				startPoint = e.touches[0]
			},
			// 监听触摸结束事件
			touchend(e) {
				if (!this.isplay) {
					return false
				}

				if (this.video_error) {
					return false
				}

				if (this.isProgress && this.touchType == 'l') {
					let that = this;
					const {
						videoCurrentTimeSec
					} = that;
					that.reset()
					setTimeout(() => {}, 500);
					that.highlight = false;
					that.VideoTimeVisible = false;
					that.videoPause = false
					that.$emit('slideEnd', {
						videoCurrentTimeSec
					})
				}
				if (this.touchType == 'a') {
					this.VideoTimeVisible = false;
					this.touchendHandler()
				}
			},

			progressRun() {
				let that = this;
				if (!that.isplay) {
					return false
				}

				if (that.video_error) {
					return false
				}

				if (that.precent >= 100) {
					// 重新播放
					that.buttonLeft = 0;
					that.progress = 0;
					that.precent = 0;
					that.videoCurrentTime = '00:00';
					that.VideoTimeVisible = false;
					that.videoCurrentTimeSec = 0;
				}
				const {
					max,
					buttonLeft,
					videoTotalTime,
				} = that;
				let buttonLeftStep = 0;
				buttonLeftStep = buttonLeft && buttonLeft;
				let id = setInterval(() => {
					clearInterval(id);
					id = setInterval(() => {
						if (that.precent >= 100) {
							this.$emit('progressDone')
							clearInterval(id);
							return;
						}
						// 19是视频总时长，实测大概1s误差 视频20s 这里要是19s
						buttonLeftStep += max / ((videoTotalTime - 1) * 10)
						buttonLeftStep = buttonLeftStep >= 0 ? buttonLeftStep : 0
						this.buttonLeft = buttonLeftStep
						this.progress = buttonLeftStep
						this.precent = parseInt((buttonLeftStep / max) * 100)
						this.videoCurrentTime = formatTime(Math.floor((parseInt((buttonLeftStep / max) *
							100) / 100) * videoTotalTime))
						this.intervalId = id
						this.videoCurrentTimeSec = Math.floor((parseInt((buttonLeft / max) * 100) / 100) *
							videoTotalTime)

					}, 100);
				}, 100);
			},
			progressPause() {
				const {
					intervalId,
				} = this;
				clearInterval(intervalId);
			},
			hidePauseIcon() {
				this.videoPause = false
			},
			// 点击
			progressHandler(e) {

				if (!this.isplay) {
					this.$emit("progressHandlerFalse")
					return false
				}

				if (this.video_error) {
					return false
				}

				throttle(() => {
					const {
						videoPause
					} = this;

					this.videoPause = !videoPause
					this.highlight = !videoPause
					if (videoPause) {
						// this.progressRun();
					} else {
						this.progressPause();
					}
					this.$emit("progressHandler", {
						videoPause
					})
				}, 200)
			},

			// 长按
			longpressHandler() {
				if (!this.isplay) {
					return false
				}

				if (this.video_error) {
					return false
				}

				const {
					videoPause
				} = this;
				this.touchType = 'a'
				if (videoPause) {
					this.progressHandler()
				}
				this.islongpressHandler = true
				this.$emit("longpressHandler", {
					videoPause
				})
			},

			touchendHandler() {
				if (!this.isplay) {
					return false
				}

				if (this.video_error) {
					return false
				}

				const {
					videoPause
				} = this;
				this.islongpressHandler = false
				this.$emit("touchendHandler", {
					videoPause
				})
			},
			// 移动
			moveTo(e) {
				if (!this.isplay) {
					return false
				}

				if (this.video_error) {
					return false
				}

				if (this.islongpressHandler) {
					return false
				}
				if (this.isProgress) {
					this.$emit('moveToPause')
					this.progressPause();
					this.slide();
					let that = this;
					const {
						max,
						videoTotalTime
					} = that;
					var endPoint = e.touches[e.touches.length - 1]
					let translateX = endPoint.clientX - startPoint.clientX;
					startPoint = endPoint;
					let buttonLeft = this.buttonLeft + translateX;
					if (buttonLeft > max) {
						// 滑动位置大于进度条最大宽度的时候让它为最大宽度
						buttonLeft = max
					}
					if (buttonLeft < min) {
						// 滑动位置小于进度条最大宽度的时候让它为最小宽度
						buttonLeft = min
					}

					this.buttonLeft = buttonLeft
					this.progress = buttonLeft
					this.precent = parseInt((buttonLeft / max) * 100)
					this.videoCurrentTime = formatTime(Math.floor((parseInt((buttonLeft / max) * 100) / 100) *
						videoTotalTime))
					this.highlight = true
					this.VideoTimeVisible = true
					this.videoCurrentTimeSec = Math.floor((parseInt((buttonLeft / max) * 100) / 100) * videoTotalTime)


					this.$emit('slideStart', {
						videoCurrentTimeSec: Math.floor((parseInt((buttonLeft / max) * 100) / 100) *
							videoTotalTime),
					})
				}
			},
			onAllVideo() {
				if (this.from == 'index') {
					uni.navigateTo({
						url: '/page_account/video/video?ablum_id=' + this.videoTtem.skitId + '&tt_album_id=' + this.videoTtem.thirdSkitId +
							'&tt_episode_id=' + this.videoTtem.thirdEpisodeId
					})
				} else {
					this.$emit("changeVideo", {
						item: this.videoTtem
					})
				}
			},
		}
	};
</script>


<style lang="scss">
	.process_wrap {
		position: relative;
		width: 680rpx;
		margin: 0 auto;
		opacity: 1;
		transition: all .5s;
	}

	.hidden {
		display: none;
	}

	.process_wrap_l {
		opacity: 0;
	}

	.video-title {
		position: relative;
		z-index: 1999;
		width: 100%;
		opacity: 1;
		transition: all .5s;
		bottom: 5rpx;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding: 0 36rpx 0 26rpx;



		&.complete-works_l {
			opacity: 0;
		}

		&.isMoveTo {
			opacity: 0;
		}

		.complete {
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 45rpx;
			margin-bottom: 20rpx;
		}

		.btn {
			font-weight: 400;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 37rpx;
		}

	}

	.complete-works-box {
		width: 100vw;
	}

	.complete-works {
		position: relative;
		z-index: 1999;
		width: 100%;
		height: 74rpx;
		background: rgba(0, 0, 0, 0.4);
		// backdrop-filter: blur(10px);
		/* Safari for macOS & iOS */
		-webkit-backdrop-filter: blur(10px);
		/* Google Chrome */
		backdrop-filter: blur(10px);
		opacity: 1;
		transition: all .5s;
		// bottom: -27rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 0 36rpx 0 26rpx;



		&.complete-works_l {
			opacity: 0;
		}

		&.isMoveTo {
			opacity: 0;
		}

		.complete {
			font-weight: 600;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 37rpx;
			display: inline-block;
			vertical-align: middle;

			&::before {
				display: inline-block;
				vertical-align: middle;
				font-family: "dy-iconfont";
				content: "\e640";
				font-size: 32rpx;
				margin-right: 16rpx;
				margin-top: -2rpx;
			}
		}

		.btn {
			width: 116rpx;
			height: 48rpx;
			background: #FF7F00;
			border-radius: 24rpx;
			font-weight: 600;
			font-size: 26rpx;
			color: #000000;
			line-height: 48rpx;
			text-align: center;
		}
	}

	.line {
		width: 100%;
		height: 4rpx;
		flex-shrink: 0;
		background: rgba(255, 255, 255, 0.04);
		border-radius: 4rpx;
	}

	.active-line {
		position: absolute;
		height: 4rpx;
		top: 0;
		left: 0;
		width: 100%;
		background: rgba(255, 255, 255, 0.04);
		border-radius: 4rpx;
	}

	.spot {
		position: absolute;
		top: 0;
		left: 0;
		width: 8rpx;
		height: 8rpx;
		border-radius: 8rpx;
		/* background: rgba(255, 255, 255, 0.04); */
		background-color: black;
		box-shadow: 0 0 8rpx 0 rgba(0, 0, 0, 0.34);
	}

	.highlight-line {
		width: 100%;
		height: 4rpx;
		flex-shrink: 0;
		background: rgba(255, 255, 255, 0.04);
		border-radius: 4rpx;
	}

	.highlight-line-box {
		// padding: 26rpx 0 0 0;
	}

	.highlight-active-line {
		height: 4rpx;
		background: var(--text-text-quaternary-3, #FFF);
		border-radius: 4rpx;
	}

	.highlight-active-line-box {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		// padding: 26rpx 0 0 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.highlight-spot {
		position: absolute;
		top: 16rpx;
		left: 0;
		width: 0rpx;
		height: 0rpx;
		border-radius: 100%;
		background: var(--text-text-quaternary-3, #FFF);
		box-shadow: 0 0 8rpx 0 rgba(0, 0, 0, 0.34);
	}

	.video-time {
		position: absolute;
		top: -96rpx;
		color: var(--text-const-const-text-inverse, var(--text-text-quaternary-3, #FFF));
		text-align: center;
		text-shadow: 0px 2.4000000953674316px 1.2000000476837158px rgba(0, 0, 0, 0.15);
		font-family: PingFang SC;
		font-size: 40rpx;
		font-style: normal;
		font-weight: 600;
		line-height: 130%;
	}

	.video-pause {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		height: calc(100vh - var(--safe-area-bottom) - 100rpx - 30rpx);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9;
	}

	.video-pause image {
		width: 108rpx;
		height: 134rpx;
	}

	#slider ::before {
		content: "";
		position: absolute;
		top: -40rpx;
		right: -20rpx;
		bottom: -20rpx;
		left: -20rpx;
	}
</style>